<template>
  <div class="system_container">
    <div class="system_wrapper">
      <!-- 头部标题 -->
      <div class="header">
        <h1>人云联拓·医疗智能体提供决策解决方案</h1>
        <div class="sub_title">基于医疗领域人工智能技术，为医疗机构提供精准性决策支持，推动医疗服务全面质量提升</div>
        <div class="tags">
          <div class="tag">
            <img class="icon" src="@/assets/main_app/智慧医疗.png" alt="">
             <div class="text">智慧医疗</div>
          </div>
           <div class="tag">
            <img class="icon" src="@/assets/main_app/精准管理.png" alt="">
            <div>精准管理</div>
            </div>
          <div class="tag">
            <img class="icon" src="@/assets/main_app/辅助决策.png" alt="">
            <div>辅助决策</div>
          </div>
        </div>
      </div>
      <!-- 主体内容 -->
      <div class="main-content">
        <!-- 医疗数据精细化管理系统 -->
        <div class="card card-left"
             @mouseenter="medicalSystemImage = medicalSystemHoverImage"
             @mouseleave="medicalSystemImage = medicalSystemNormalImage">
          <img :src="medicalSystemImage"
               class="subtitle-icon" alt="">
          <h2>医疗数据精细化管理系统</h2>
          <p style="width: 300px">基于 AI 技术实现医疗数据的智能分析、精准预测和可视化展示，为医院管理决策提供数据支持</p>
          <button class="btn btn-green" @click="goToNationalExamination">进入系统</button>
        </div>
        <!-- 医疗组织党建系统 -->
        <div class="card card-right"
             @mouseenter="partyBuildingImage = partyBuildingHoverImage"
             @mouseleave="partyBuildingImage = partyBuildingNormalImage">
          <img :src="partyBuildingImage" class="subtitle-icon" alt="">
          <h2>医疗组织党建系统</h2>
          <p style="width: 300px;">整合医疗系统党建资源，实现党组织管理、党员教育、活动组织的数字化和智能化</p>
          <button class="btn btn-red" @click="goToPartyBuilding">进入系统</button>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="footer">
        <p>© 2025 人云控股有限公司 版权所有</p>
        <p>客服热线：440-7766-555 | 官网：www.whitest.com</p>
      </div>
    </div>

  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import medicalSystemNormalImage from '@/assets/main_app/医疗数据系统.png'
import medicalSystemHoverImage from '@/assets/main_app/img_1.png' // 如果有hover图片，请替换为实际的hover图片路径
import partyBuildingNormalImage from '@/assets/main_app/医疗党建系统.png'
import partyBuildingHoverImage from '@/assets/main_app/img_2.png' // 如果有hover图片，请替换为实际的hover图片路径
const medicalSystemImage = ref(medicalSystemNormalImage);
const partyBuildingImage = ref(partyBuildingNormalImage);

const router = useRouter();


// 党建
const goToPartyBuilding = ()=>{
  router.push({name: 'ReactApp'})
}
// 国考
const goToNationalExamination = ()=>{
  router.push({name: 'VueApp'})
}
</script>

<style scoped lang="scss">
.system_container {
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #F3F4F6;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/static/loginImg.png");
  background-size: 100% 100%; /* 背景图覆盖容器，保持比例 */
  background-position: left top; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 背景图不重复 */
  .system_wrapper {
    background-color: white;
    border-radius: 10px;
    padding: 40px 80px;
    .header {
      text-align: center;
      .sub_title {
         color: #6b727d;
         font-size: 14px;
         padding: 20px 0;
      }
      .tags {
         padding: 0 0 50px 0;
         display: flex;
         justify-content: center;
         font-weight: bolder;
         .tag {
           padding: 0 20px;
           display: flex;
           align-items: center;
           color: #5f6168;
           .icon{
              display: block;
              height: 30px;
              margin: 0 10px;
           }
         }
      }
    }
    .main-content {
      display: flex;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      gap: 30px;
    }
    .card {
      padding: 20px;
      border-radius: 12px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      &.card-left {
        color: #333333;
        transform: scale(1);
        transition: transform 0.3s ease;
        border: 2px solid #1a8c7b;
        &:hover {
          transform: scale(1.1);
          background-color: #1a8c7b;
          color: white;
          .btn-green {
            background-color: #ffffff;
            color: #1a8c7b;
          }
        }
      }
      &.card-right {
        background-color: white;
        color: #333333;
        border: 2px solid #e63946;
        transform: scale(1);
        transition: transform 0.3s ease;
        &:hover {
          transform: scale(1.1);
          background-color: #e63946;
          color: white;
          .btn-red {
            background-color: #ffffff;
            color: #e63946;
          }
        }

      }
      .subtitle-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
       h2 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 15px;
      }
       p {
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 20px;
      }
      .btn {
        display: block;
        width: 120px;
        margin: 0 auto;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: white;
      }
      .btn-green {
        background-color: #1a8c7b;
      }
      .btn-red {
        background-color: #e63946;
      }
    }
    .footer {
      text-align: center;
      margin-top: 60px;
      color: #666;
      font-size: 12px;

      p {
        margin: 5px 0;
      }
    }
  }
}


</style>
